<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮箱验证</title>
    <link rel="stylesheet" href="/assets/home/css/mui.min.css">
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css">
    <link rel="stylesheet" href="/assets/home/css/email.css">

    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>
</head>

<body>
    <div class="user">
        <div class="avatar wow fadeInUp">
            <img src="{$business.avatar_text}" />
        </div>
    </div>
    
    <form class="mui-input-group" method="post" enctype="multipart/form-data">      
        <div class="mui-input-row wow" data-wow-delay="100ms">
            <label>邮箱：</label>
            <input type="text" name="email" value="{$business.email}"  class="mui-input-clear" placeholder="请输入邮箱" required disabled />
        </div>
    
        <div class="mui-input-row wow" data-wow-delay="200ms">
            <label>验证码：</label>
            <input type="text" name="code" class="mui-input-clear" placeholder="请输入验证码" required />
        </div>
        
        
        <div class="mui-button-row">
            <button type="submit" class="mui-btn mui-btn-primary wow" data-wow-delay="300ms">确认</button>
            <button type="button" id="send" class="mui-btn mui-btn-success wow" data-wow-delay="400ms">发送邮件</button>
        </div>
    </form>
</body>
</html>

<script>
    var sec = 60
    var T

    $("#send").click(async function(){
        $(this).html('发送中...')
        $(this).attr('disabled', true)
        $.get('/home/center/send')
        .then((data)=>{
            //轻提醒
            mui.toast(data.msg, {duration: 3000})
            if(data.code!=0){
                //倒计时
                $(this).html(sec)
                $(this).attr('disabled', true)
                T = setInterval(autoplay, 10)
            }
        })
    })

    function autoplay()
    {
        var num = $("#send").html()
            num = parseInt(num)

        if(num <= 0)
        {
            //停止定时器
            clearInterval(T)
            $("#send").removeAttr('disabled')
            $("#send").html('重新发送验证码')
        }else
        {
            $('#send').html(num-1)
        }
    }

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>